<script>
  import sheep from '@/sheep';

  export default {
    name: 'pcWorship',
    data() {
      return {
        // 拜祖寻根搜索
        familyName: '',
        // 字母列表
        zimuList: [
          {
            name: '全部',
          },
          {
            name: 'A',
          },
          {
            name: 'B',
          },
          {
            name: 'C',
          },
          {
            name: 'D',
          },
          {
            name: 'E',
          },
          {
            name: 'F',
          },
          {
            name: 'G',
          },
          {
            name: 'H',
          },
          {
            name: 'I',
          },
          {
            name: 'J',
          },
          {
            name: 'K',
          },
          {
            name: 'L',
          },
          {
            name: 'M',
          },
          {
            name: 'N',
          },
          {
            name: 'O',
          },
          {
            name: 'P',
          },
          {
            name: 'Q',
          },
          {
            name: 'R',
          },
          {
            name: 'S',
          },
          {
            name: 'T',
          },
          {
            name: 'U',
          },
          {
            name: 'V',
          },
          {
            name: 'W',
          },
          {
            name: 'X',
          },
          {
            name: 'Y',
          },
          {
            name: 'Z',
          },

        ],
        // 字母下标
        ancestorIndex: 0,
        // 拜祖寻根列表
        ancestorList: [],
        // 拜祖寻根搜索条件
        ancestorParam: {
          page: 1,
          pagesize: 20,
          total: 0,
        },
        // 三皇五帝
        emperor: [],
      };
    },
    async created() {
      await this.getAncestor();
      await this.getEmperor();
    },
    methods: {
      // 选择字母
      selectZimu(index) {
        this.ancestorIndex = index;
        this.ancestorList = [];
        this.familyName = this.zimuList[index].name == '全部' ? '' : this.zimuList[index].name;
        this.ancestorParam.page = 1;
        this.getAncestor();
      },
      // 获取拜祖寻根
      async getAncestor() {
        const { data } = await sheep.$api.surname.getAllSurname({
          cid: 4,
          code: this.familyName,
          page: this.ancestorParam.page,
          pagesize: this.ancestorParam.pagesize,
        });
        data.list.forEach((item) => {
          this.ancestorList.push(item);
        });
        this.ancestorParam.total = data.count;
      },
      // 获取更多拜祖寻根
      getMoreOriginals() {
        if (this.ancestorParam.page * this.ancestorParam.pagesize < this.ancestorParam.total) {
          this.ancestorParam.page++;
          this.getAncestor();
        }
      },
      // 获取三皇五帝
      async getEmperor() {
        const { data } = await sheep.$api.surname.getEmperor();
        this.emperor = data;
      },
    },
  };
</script>

<template>
  <view class="flex" style="font-family: Source Han Sans CN, Source Han Sans CN;height: 100%;">
    <view class="flex flex-column flex-sub bg_FFFFFF" style="border-radius: 16rpx;overflow: hidden">
      <view style="width: 100%;padding: 20rpx 0;border-bottom: 2rpx solid #E8E8E8"
            class="flex align-center justify-between">
        <view class="flex align-end" style="margin-left: 40rpx;">
          <view class="flex align-center">
            <view style="width: 8rpx;height: 36rpx;border-radius: 14rpx;background: #FF440A"></view>
            <view style="font-size: 56rpx;color: #363636;margin-left: 10rpx;white-space: nowrap" class="fw_500">
              拜祖寻根
            </view>
          </view>
          <view style="font-size: 40rpx;color: #363636;margin-left: 20rpx;white-space: nowrap" class="fw_500">
            得姓始祖
          </view>
        </view>
<!--        <view-->
<!--          style="width: 20%;height: 60rpx;border-radius: 30rpx;overflow: hidden;border: 2rpx solid #BCBCBC;margin-right: 40rpx;"-->
<!--          class="flex align-center"-->
<!--        >-->
<!--          <input type="text" v-model="familyName" placeholder="搜索" style="margin-left: 20rpx;">-->
<!--          <text class="iconfont icon-ic_search" style="margin-right: 30rpx;cursor:pointer;"></text>-->
<!--        </view>-->
      </view>
      <view class="flex-sub flex flex-column" style="width: 100%;">
        <view style="flex-wrap: wrap" class="flex align-center ml_20 mr_20 mt_20">
          <view v-for="(item,index) in zimuList" :key="index"
                class="mb_20"
                style="margin-right: 20rpx;padding: 8rpx 40rpx;white-space: nowrap;cursor:pointer;border-radius: 30rpx;border: 2rpx solid #BCBCBC;font-size: 40rpx;color: #363636"
                :style="{
                      color:ancestorIndex == index ? '#FFFFFF' : '#363636',
                      background:ancestorIndex == index ? '#FF4206' : 'transparent',
                      border:ancestorIndex == index ? '2rpx solid #FF4206' : '2rpx solid #BCBCBC',
                    }"
                @click.stop="selectZimu(index)"
          >
            {{ item.name }}
          </view>
        </view>
        <view class="flex-sub" style="position: relative">
          <scroll-view scroll-y class="surnameList"
                       @scrolltolower="getMoreOriginals"
                       :lower-threshold="400"
          >
            <view style="display: grid;grid-template-columns: repeat(6,1fr);grid-gap: 20rpx;"
                  class="ml_20 mr_20 mt_20 mb_20"
            >
              <view v-for="(item,index) in ancestorList"
                    :key="index"
                    style="cursor:pointer;border: 4rpx solid #FDAF00;border-radius: 16rpx;background: #FFE9BA"
                    class="flex flex-column align-center justify-center"
                    @click.stop="selectIndex(index)"
              >
                <image :src="`${item.image_input}`"
                       class="mt_20"
                       style="border-radius: 16rpx;background: #FAF4E8;overflow: hidden;width: 92%"
                       mode="widthFix"></image>
                <view style="font-size: 14px;font-weight: 500;color:#865D01;margin-top: 5px;">
                  {{ item.ancestors }}
                </view>
                <view style="font-size: 24px;margin-bottom: 10px;margin-top: 10px;"
                      class="fw_500 color_FFFFFF firstAncestor_bg flex align-center justify-center">
                  {{ item.surname }}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <view class="ml_20 flex flex-column align-center"
          style="width: 486rpx;position: relative">
      <scroll-view scroll-y="true" class="surnameList">
        <view style="width: 100%;border-radius: 8px;"
              class="flex flex-column align-center bg_FFFFFF">
          <view style="width: 100%;padding: 20rpx 0;border-bottom: 2rpx solid #E8E8E8"
                class="flex align-center justify-between">
            <view class="flex align-end" style="margin-left: 40rpx;">
              <view class="flex align-center">
                <view style="width: 8rpx;height: 36rpx;border-radius: 14rpx;background: #FF440A"></view>
                <view style="font-size: 36rpx;color: #363636;margin-left: 10rpx;white-space: nowrap" class="fw_500">
                  三皇五帝
                </view>
              </view>
            </view>
          </view>
          <view class="flex flex-column align-center" style="margin-top: 20rpx;width: 100%;">
            <view
              style="width: 92%;background: #CE986E;border-radius: 16rpx;margin-bottom: 20rpx;overflow: hidden;cursor:pointer;"
              class="flex flex-column align-center"
              v-for="(item,index) in emperor"
              :key="index"
            >
              <image :src="item.image_list" style="width: 100%;border-radius: 16rpx;" mode="widthFix"></image>
              <view class="genealogy_bg_icon color_FFFFFF fw_500"
                    style="margin-top: 20rpx;margin-bottom: 20rpx;font-size: 40rpx;">
                {{ item.ancestors }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .surnameList {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>